<template>
  <task-container @selectItemClick="onSelectItem">
    <div class="c-box">
      <div class="personal-details">
        <div class="icon">
          <img src="~@/assets/ico/u18916.png" height="90" alt="" />
        </div>
        <div class="info">
          <div style="margin-bottom: 10px;">
            姓名：{{ Object.keys(selectItem).length > 0 && selectItem.name ? selectItem.name : null }}
          </div>
          <div class="info-flex">
            <div>手机：{{ Object.keys(selectItem).length > 0 && selectItem.phone ? selectItem.phone : null }}</div>
            <div>运营商：{{ Object.keys(selectItem).length > 0 && selectItem.operatorName ? selectItem.operatorName : null }}</div>
            <div>
              归属地：{{
                Object.keys(selectItem).length > 0 && selectItem.placeOwnership ? selectItem.placeOwnership : null
              }}
            </div>
          </div>
        </div>
      </div>
      <a-tabs v-model="tabKey" @change="tabsChange">
        <a-button slot="tabBarExtraContent" @click="doFetch"> 更新数据 </a-button>
        <a-tab-pane key="1" tab="通联记录">
          <z-table
            ref="table"
            rowKey="id"
            size="middle"
            :showAlert="false"
            :showSelection="false"
            :loading="loading"
            :columns="columns"
            :dataSource="pageData"
            @change="onTableChange"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="通联关系图">
          <relation-bar :barWidth="14" :data="relationData" />
        </a-tab-pane>
      </a-tabs>
    </div>
  </task-container>
</template>
<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import taskContainer from './modules/taskContainer'
import RelationBar from './modules/echart_relation_bar'
export default {
  components: {
    taskContainer,
    RelationBar
  },
  data() {
    return {
      selectItem: {},
      result: {},
      loading: false,
      reloading: true,
      tabKey: '1',
      relationData: [],
      columns: [
        {
          title: '序号',
          width: 60,
          align: 'center',
          dataIndex: 'order',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '对端号码',
          dataIndex: 'connectPhone',
          width: 90
        },
        {
          title: '对端类型',
          dataIndex: 'type',
          width: 80,
          customRender: (text, record, index) => {
            return text==1? '内部通联': text==2? '外部通联': ''
          }
        },
        {
          title: '通联总时长',
          dataIndex: 'commonDurationTime',
          width: 140
        },
        {
          title: '通联次数',
          dataIndex: 'count',
          width: 100
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {},
    }
  },
  methods: {
    // 点击目标人员
    onSelectItem(item) {
      this.selectItem = item
      this.refreshTable()
    },
    tabsChange(value) {
      if (value === '1') this.refreshTable()
      if (value === '2') this.getCommonRecord()
    },
    refreshTable() {
      let obj = {
        phone:
          this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.phone
            ? this.selectItem.phone
            : null,
        taskId: this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.taskId
            ? this.selectItem.taskId
            : null
      }
      let form = Object.assign({}, obj, this.pageFilter)
      this.loading = true
      alarmServiceApi
        .getCommonRecordRecord(form)
        .then(res => {
          this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
          } else {
            this.$message.warn(res.message?res.message: '请求失败')
          }
        })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    getCommonRecord() {
      let queryParam = {
        phone:
          this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.phone
            ? this.selectItem.phone
            : null,
        taskId: this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.taskId
            ? this.selectItem.taskId
            : null
      }
      alarmServiceApi
        .getCommonRecordRecordDiagram(queryParam)
        .then(res => {
          if (res.success) {
            const { result } = res
            let results = this.arrSort(result, 'count') //排序
            this.relationData = results ? results.map((item, index) => {
              return {
                product: item.connectPhone,
                count: item.count
              }
            }).filter(obj => obj !== undefined) : []
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 更新数据
    doFetch() {
      let form = {
        msisdn:
          this.selectItem && Object.keys(this.selectItem).length > 0 && this.selectItem.phoneNumber
            ? this.selectItem.phoneNumber
            : null
      }
      let param = Object.assign(this.updateParam, form)
      let updateContactRecord = new Promise((resolve, reject) => {
        eventModelApi
          .updateContactRecord(param)
          .then(res => {
            if (res.success) {
              resolve(res)
            } else {
              resolve(res)
            }
          })
          .catch(e => {
            reject({ success: false, message: '发生错误' })
          })
      })
      let updateContactRelation = new Promise((resolve, reject) => {
        eventModelApi
          .updateContactRelation(param)
          .then(res => {
            if (res.success) {
              resolve(res)
            } else {
              resolve(res)
            }
          })
          .catch(e => {
            reject({ success: false, message: '发生错误' })
          })
      })
      Promise.all([updateContactRecord, updateContactRelation])
        .then(res => {
          let filters = res.filter(item => item.success === false)
          if (res.length > filters.length && filters.length === 0) {
            this.$message.success('操作成功')
            this.getPhoneInfo()
            this.refreshTable()
            if (this.tabKey == 2) {
              this.$nextTick(() => {
                this.$refs.relationRef.getList()
              })
            }
          } else {
            let message = filters.map(row => row.message).join(',')
            this.$message.warning(message)
          }
        })
        .catch(e => {
          this.$message.warn('操作错误')
        })
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = false
      this.$nextTick(() => (this.reloading = true))
    },
    /**
     * 自定义函数名：arrSort
     * @param arr： 被操作数
     * @param key： 需要用作排序的key名
     */
    arrSort(arr, key) {
      arr.sort(function(a, b) {
        return b[key] - a[key]
      })
      return arr
    },
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
.personal-details {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  .icon {
    flex: 1;
    .anticon {
      font-size: 80px;
    }
  }
  .info {
    flex: 4;
    .info-flex {
      display: flex;
      justify-content: space-between;
      > * {
        flex: 1;
      }
    }
  }
}
</style>
